import React, { useState, useEffect, useRef } from "react";

interface VideoPlayerProps {}
const VideoPlayer: React.FC<VideoPlayerProps> = () => {
  const [isPlaying, setIsPlaying] = useState(false);
  const ref = useRef<HTMLVideoElement>(null);
  const [text, setText] = useState("");

  useEffect(() => {
    if (isPlaying) {
      console.log("调用 video.play()");
      ref.current?.play();
    } else {
      console.log("调用 video.pause()");
      ref.current?.pause();
    }
  }, [isPlaying]);

  return (
    <>
      <input value={text} onChange={e => setText(e.target.value)} />
      <br />
      <button onClick={() => setIsPlaying(!isPlaying)}>{isPlaying ? "暂停" : "播放"}</button>
      <video
        ref={ref}
        loop
        playsInline
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
      ></video>
    </>
  );
};
export default VideoPlayer;
